<script setup lang="ts">

import {ref, watch} from "vue";
import {DateType, generateCalendar, getTodayStartTimestamp} from "@/components/date-time-picker/timeUtils";

defineProps({
  value: {
    type: Number,
    default: 0
  }
})

const value = defineModel<number>()

const selectedDate = ref()


const years = defineModel<any[]>('years')
years.value = Array.from({length:(new Date().getFullYear() - new Date(`2024-01-01`).getFullYear()) + 1},(_, i) => ({
  name: i+2024,
  value: i+2024
}))
const months = ref([
    {
      name: '01',
      value: 1
    },
    {
      name: '02',
      value: 2
    },
    {
      name: '03',
      value: 3
    },
    {
      name: '04',
      value: 4
    },
    {
      name: '05',
      value: 5
    },
    {
      name: '06',
      value: 6
    },
    {
      name: '07',
      value: 7
    },
    {
      name: '08',
      value: 8
    },
    {
      name: '09',
      value: 9
    },
    {
      name: '10',
      value: 10
    },
    {
      name: '11',
      value: 11
    },
    {
      name: '12',
      value: 12
    }
])

const params = ref({
  year: new Date(value.value as number).getFullYear(),
  month: new Date(value.value as number).getMonth() + 1,
  day:  new Date(value.value as number).getDate()
})

watch(()=>value.value,(v)=>{
  params.value.month = new Date(v as number).getMonth() + 1
  params.value.year = new Date(v as number).getFullYear()
  params.value.day = new Date(v as number).getDate()
  selectedDate.value = v
},{
  immediate:true,
  deep:true
})

const handleSelect = (item:DateType) => {
  selectedDate.value = item.timestamp
  params.value.month = item.month
  params.value.year = item.year
  params.value.day = item.value
  value.value = new Date(`${item.year}-${item.month}-${item.value} 00:00:00`).getTime()
}
</script>

<template>
<div>
  <div class="h-[63px] flex justify-between items-center pr-[10px] bb">
    <div></div>
    <div class="flex items-center">
      <div class="w-[94px] h-[32px]">
        <el-select
            filterable
            v-model="params.year"
        >
          <el-option
              v-for="item in years"
              :key="item.name"
              :label="item.name"
              :value="item.value"
          />
        </el-select>
      </div>
      <div class="w-[67px] h-[32px] ml-[8px]">
        <el-select
            filterable
            v-model="params.month"
        >
          <el-option
              v-for="item in months"
              :key="item.name"
              :label="item.name"
              :value="item.value"
          />
        </el-select>
      </div>
    </div>
  </div>
  <div class="pl-[24px] pt-[10px] pb-[24px]">
    <div class="flex items-center text-[14px] text-[#808080] text-center h-[40px]">
      <div class="w-[40px] mr-[4px]">一</div>
      <div class="w-[40px] mr-[4px]">二</div>
      <div class="w-[40px] mr-[4px]">三</div>
      <div class="w-[40px] mr-[4px]">四</div>
      <div class="w-[40px] mr-[4px]">五</div>
      <div class="w-[40px] mr-[4px]">六</div>
      <div class="w-[40px] mr-[4px]">日</div>
    </div>
    <div class="flex items-center flex-wrap text-[#1A1A1A] text-[14px]">
      <div class="w-[40px] h-[40px] mr-[4px] flex items-center justify-center rounded-[50%] cursor-pointer day" :class="{
        selectDate: selectedDate == day.timestamp,
        noNowMonth: day.month != params.month,
        isNowDate: day.timestamp == getTodayStartTimestamp()
      }" v-for="(day,i) in generateCalendar(params.year,params.month,years?.indexOf(params.year) != -1)"
           :key="i" @click="handleSelect(day)">{{ day.value }}</div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
:deep(.el-select__selection){
  height: 24px;
}

:deep(.el-select__wrapper){
  background: #ECECEC !important;
  box-shadow: none !important;
}

.isNowDate{
  color: #FB2D19;
  position: relative;
}

.select{
  background: #fff;
  border-radius: 4px;
  height: 100%;
  color: #1A1A1A;
  transition: all .2s;
}

.selectDate{
  background: #FB2D19;
  color: #fff;
  transition: all .2s;
}

.noNowMonth{
  color: #CCCCCC;
}

.bb{
  border-bottom: 1px solid #ECECEC;
}

.isNowDate:after{
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: #FB2D19;
  border-radius: 50%;
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translate(-50%);
  transition: all .2s;
}
.day{
  transition: all .2s;
}
.day:hover{
  border: 1px solid #FB2D19;
  transition: all .2s;
}
</style>
